<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath %>">
    <title>手机端主页新闻</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <%-- 引用layui.css --%>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>css/common.css"/>
    <style type="text/css">
        .laytable-cell-1-titleImg { /*最后的pic为字段的field*/
            height: auto;
            width: auto;
        }
    </style>

</head>

<body>

<section class="panel panel-padding ">
    <div class="ibox-toolbar">
        <button id="addXW" data-modal="" data-title="添加新闻"
                class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe654;</i> 添加新闻
        </button>
    </div>

    <table class="layui-table"
           lay-data="{
	                        id: 'xwTeble',
	                        width:'auto',
	                        height:'auto',
	                        url: 'xw/list.do',
	                        page: true,
	                        even: true,
	                        skin: 'row',
	                        limits:[10,20,30,40,50],
	                        limit:10,
	                        method:'post'
	                        }"
           lay-filter="xwLay">
        <thead>
        <tr>
            <th lay-data="{type: 'numbers', title: '序号', width: '120'}">序号</th>
            <th lay-data="{field:'titleImg',width:300,align:'center',toolbar:'#image'}">主题图片</th>
            <th lay-data="{field:'title', width:600,align:'center'}">标题</th>
            <th lay-data="{field:'id', width:60 ,hide:'true'}">id</th>
            <th lay-data="{fixed: 'right', width:200,align:'center',toolbar:'#xwBar'}">操作</th>
        </tr>
        </thead>
    </table>
</section>
<script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>
<script type="text/html" id="xwBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑新闻</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除新闻</a>
</script>
<script type="text/html" id="image">
    <img src="{{d.titleImg}}"/>
</script>
<script type="text/javascript">
    layui.config({
        base: "<%=basePath%>/js/common/"
    }).use(["common", "element", "layer", "form", "table", "jquery"], function () {
        var elem = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        layui.common.init();
        $("#addXW").on("click", function () {
            layer.open({
                type: 2,
                title: '添加新闻',
                content: 'xw/addXW.do',
                area: ['900px', '600px'],
                anim: 5,
                isOutAnim: true,
                maxmin: true,
                resize: false,
                moveOut: true,
                zIndex: 99999,
                end: function () {
                    table.reload("xwTeble");
                }
            });
        });
        table.on('tool(xwLay)', function (obj) {
            var data = obj.data;            //获得当前行数据
            var layEvent = obj.event;       //获得 lay-event 对应的值
            var tr = obj.tr;                //获得当前行 tr 的DOM对象
            //console.log(data);
            if (layEvent === 'del') {  //删除
                layer.open({
                    icon: 3,
                    title: "删除",
                    content: "确认删除？",
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        $.ajax({
                            type: "post",
                            url: 'xw/delxw.do',
                            data: {id: data.id},
                            dataType: "json",
                            success: function (json) {
                                if (json.statusCode == 200) {
                                    table.reload("xwTeble", {});
                                    layer.msg("删除成功", {icon: 6, time: 2000});
                                } else {
                                    layer.msg("删除失败", {icon: 5, time: 2000});
                                }
                            }
                        });
                    },
                    btn2: function (index, layero) {
                    }
                });

            } else if (layEvent === 'edit') { //编辑
                layer.open({
                    type: 2,
                    title: '编辑新闻',
                    content: 'xw/toXW003.do?picPath=' + data.titleImg,
                    area: ['850px', '600px'],
                    anim: 5,
                    isOutAnim: true,
                    maxmin: true,
                    resize: false,
                    moveOut: true,
                    zIndex: 99999,

                    success: function (layero, index) {
                        //console.log(data);
                        var body = layer.getChildFrame('body', index);  //巧妙的地方在这里哦 获取	子页面的body对象
                        body.contents().find("#id").val(data.id);//给子页面的元素赋值
                        body.contents().find("#title").val(data.title);
                        body.contents().find("#content").val(data.content);
                    },
                    end: function () {
                        table.reload("xwTeble");
                        setTimeout('window.location.reload()', 500);
                    }
                });
            }
        });
    });
</script>
</body>
</html>
